<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas
      id="canvas"
      width="500"
      height="500"
      style="border: 1px red solid"
    ></canvas>
  </body>
</html>
<script src="./polygon.js"></script>
<script src="./arrow.js"></script>
<script>
  const canvas = document.getElementById("canvas");
  const cxt = canvas.getContext("2d");

  async function main() {


    // 利用一个圆来进行矩阵的填充

    cxt.beginPath();
    cxt.arc(150,150,140,0,360*Math.PI/180,true)
    cxt.closePath();
    cxt.fillStyle='HotPink';
    cxt.fill()
    

    // // 进行不同的切割
   
    cxt.save();
    cxt.clip();
    cxt.globalCompositeOperation='xor';

    /*
       globalCompositeOperation的可选值：
       source      over in out atop
       desination  over in out atop
       lighter copy(只显示新图形，旧图形作透明处理) xor
    */
    cxt.globalCompositeOperation='destination-atop'
    
    

    // 画矩形
    cxt.beginPath();
    cxt.fillStyle='blue';
    
    cxt.rect(150, 150, 200, 200);
    cxt.fill();
    // 想利用原来的圆形再裁剪一个矩形
    cxt.restore();
    cxt.clearRect(0, 0, canvas.width, canvas.height);
    
    
    cxt.clip();
    
    cxt.beginPath();
    cxt.fillStyle='yellow';
    cxt.rect(180, 180, 200, 200);
    cxt.fill();
    


  
  }

  main();
  //
</script>
